<template>
  <div class="div-main" style="width: 100%; min-height: 86vh">
    <div>
      <el-page-header @back="goBack" content="铁路局信息管理" style="margin-bottom: 10px;">
      </el-page-header>
      <el-divider></el-divider>
      <div style="display: flex; display: flex; align-items: center; flex-direction: row;">
        <el-input placeholder="请输入管理局名字" style="width: 200px; margin-left: 30px;" v-model="search">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button type="primary" plain style="margin-left: 20px;" :loading="searchLoading"
          @click="setgetAuthority">查询</el-button>
        <el-button type="danger" plain @click="openAddDialog">增加</el-button>
      </div>
      <div style="margin-left: 30px; margin-top: 20px;">
        <el-table height=391 style=" width: 98%; " stripe border :data="tableData"
          :header-cell-style="{ background: '#F0F8FF', color: '#5E5F61', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }">
          <el-table-column type="index" width="80" label="序号">
          </el-table-column>
          <el-table-column prop="railwayName" label="管理局名字">
          </el-table-column>
          <el-table-column prop="railwayAddress" label="管理局所在地">
          </el-table-column>
          <el-table-column label="管理局缩写">
            <template slot-scope="scope">
              <el-tag type="success" effect="plain">{{ scope.row.railwayAbbreviation }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="small" @click="openUpdateDialog(scope.row)" style="margin-right: 10px;"></el-button>
              <el-popconfirm title="确定删除吗？" @confirm="deleteAuthority(scope.row.id)">
                <el-button type="danger" icon="el-icon-delete" size="small" slot="reference"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="text-align: center; margin-top: 30px;">
        <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" :total=page.total
          :page-size=page.pageSize :current-page.sync=page.currentPage>
        </el-pagination>
      </div>
      <el-dialog title="添加管理局" :visible.sync="addDialogVisible" width="32%" :before-close="handleClose">
        <el-form :model="addForm" :rules="rulesAddForm" ref="addForm" label-width="150px">
          <el-form-item label="管理局名字" style="width: 350px;" prop="railwayName">
            <el-input v-model="addForm.railwayName" autocomplete="off" placeholder="请输入管理局名字"></el-input>
          </el-form-item>
          <el-form-item label="管理局所在地" style="width: 350px;" prop="railwayAddress">
            <el-input v-model="addForm.railwayAddress" autocomplete="off" placeholder="请输入管理局所在地"></el-input>
          </el-form-item>
          <el-form-item label="管理局缩写" style="width: 350px;" prop="railwayAbbreviation">
            <el-input v-model="addForm.railwayAbbreviation" autocomplete="off" placeholder="请输入管理局缩写">
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="cancelDialog" plain>取 消</el-button>
          <el-button type="primary" @click="setAddAuthority" :loading="addLoading">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="修改管理局" :visible.sync="updateDialogVisible" width="32%" :before-close="handleClose_u">
        <el-form :model="updateForm" :rules="rulesUpdateForm" ref="updateForm" label-width="150px">
          <el-form-item label="管理局名字" style="width: 350px;" prop="railwayName">
            <el-input v-model="updateForm.railwayName" autocomplete="off" placeholder="请输入车站名字"></el-input>
          </el-form-item>

          <el-form-item label="管理局所在地" style="width: 350px;" prop="railwayAddress">
            <el-input v-model="updateForm.railwayAddress" autocomplete="off" placeholder="请输入车站所在地">
            </el-input>
          </el-form-item>
          <el-form-item label="管理局缩写" style="width: 350px;" prop="railwayAbbreviation">
            <el-input v-model="updateForm.railwayAbbreviation" autocomplete="off" placeholder="请输入管理局的缩写"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button plain @click="cancelDialog_u">取 消</el-button>
          <el-button type="primary" @click="setUpdateAuthority" :loading="updateLoading">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "authority",
  data() {
    return {
      page: {
        total: 0,
        pageSize: 6,
        currentPage: 1
      },
      listdata: [],

      // 模糊查询
      search: '',
      searchLoading: false,

      // 增加
      addLoading: false,
      addDialogVisible: false,
      addForm: {
        railwayName: '',
        railwayAddress: '',
        railwayAbbreviation: ''
      },
      rulesAddForm: {
        railwayName: [
          { required: true, message: '请输入管理局名字', trigger: ['blur', 'change'] },
        ],
        railwayAddress: [
          { required: true, message: '请输入管理局所在地', trigger: ['blur', 'change'] },
        ],
        railwayAbbreviation: [
          { required: true, message: '请输入管理局缩写', trigger: ['blur', 'change'] },
        ],
      },

      // 更新
      updateDialogVisible: false,
      updateLoading: false,
      options: [],
      updateForm: {
        id: '',
        railwayName: '',
        railwayAddress: '',
        railwayAbbreviation: ''
      },
      rulesUpdateForm: {
        railwayName: [
          { required: true, message: '请输入管理局名字', trigger: ['blur', 'change'] },
        ],
        railwayAddress: [
          { required: true, message: '请输入管理局所在地', trigger: ['blur', 'change'] },
        ],
        railwayAbbreviation: [
          { required: true, message: '请输入管理局缩写', trigger: ['blur', 'change'] },
        ],
      },
    }
  },
  methods: {
    goBack() {
      this.$router.push({ name: "adminHome" })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getAuthorityPage()
    },
    // 根据分页
    getAuthorityPage() {
      this.request.get("/authority/getAllAuthorityByPage/" + this.page.pageSize + "/" + this.page.currentPage).then(
        response => {
          if (response.data.code === 1) {
            this.listdata = response.data.data.records
            this.page.total = response.data.data.total
            console.log(this.listdata);
            this.$message({
              message: '更新页面成功！',
              type: 'success',
              duration: 1000
            });
          } else {
            this.$message({
              message: '更新页面失败！',
              type: 'info',
              duration: 1000
            });
          }
        },
        error => {
          console.log(error)
        }
      )
    },

    // 模糊分页查询
    setgetAuthority() {
      this.searchLoading = true
      setTimeout(() =>
        this.getAuthority(), 1000
      )
    },
    getAuthority() {
      if (this.search != '') {
        this.request.get("/authority/getRailwayAuthorityByPage/" + this.page.pageSize + "/" + this.page.currentPage + "/" + this.search).then(
          response => {
            if (response.data.code === 1) {
              this.listdata = response.data.data.records
              this.page.total = response.data.data.total
              this.$message({
                message: '更新页面成功！',
                type: 'success',
                duration: 1000
              });
            } else {
              this.$message({
                message: '更新页面失败！',
                type: 'info',
                duration: 1000
              });
            }
          },
          error => {
            console.log(error)
          }
        ).finally(() => {
          this.searchLoading = false
        })
      } else {
        this.getAuthorityPage()
        this.searchLoading = false
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 增加管理局
    openAddDialog() {
      this.addDialogVisible = true
    },
    cancelDialog() {
      this.addDialogVisible = false
      this.resetForm('addForm')
    },
    setAddAuthority() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          this.addLoading = true
          setTimeout(() =>
            this.addAuthority(), 1000
          )
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    addAuthority() {
      this.request.post("/authority/addRailwayAuthority", this.addForm).then(
        response => {
          if (response.data.code === 1) {
            this.$message({
              message: '添加成功！',
              type: 'success',
              duration: 1000
            });
            if (this.search != '') {
              this.getAuthority()
            } else {
              this.getAuthorityPage()
            }
            this.cancelDialog()
          } else {
            this.$message({
              message: '添加失败！',
              type: 'error',
              duration: 1000
            });
          }
        },
        error => {
          console.log(error)
        }
      ).finally(() => {
        this.addLoading = false
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.resetForm('addForm')
          done();
        })
        .catch(_ => { });
    },
    // 更新车站
    openUpdateDialog(row) {
      this.updateDialogVisible = true
      console.log(row);
      this.updateForm.id = row.id
      this.updateForm.railwayName = row.railwayName
      this.updateForm.railwayAddress = row.railwayAddress
      this.updateForm.railwayAbbreviation = row.railwayAbbreviation
    },
    setUpdateAuthority() {
      this.$refs['updateForm'].validate((valid) => {
        if (valid) {
          this.updateLoading = true
          setTimeout(() => {
            this.updateAuthority()
          }, 1000)
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    updateAuthority() {
      this.request.put("/authority/putRailwayAuthority", this.updateForm).then(
        response => {
          if (response.data.code === 1) {
            this.$message({
              message: '更新成功！',
              type: 'success',
              duration: 1000
            });
            if (this.search != '') {
              this.getAuthority()
            } else {
              this.getAuthorityPage()
            }
            this.cancelDialog_u()
          } else {
            this.$message({
              message: '更新失败！',
              type: 'error',
              duration: 1000
            });
          }
        },
        error => {
          console.log(error)
        }
      ).finally(() => {
        this.updateLoading = false
      })
    },
    handleClose_u(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.resetForm('updateForm')
          done();
        })
        .catch(_ => { });
    },
    cancelDialog_u() {
      this.updateDialogVisible = false
      this.resetForm('updateForm')
    },
    // 删除
    deleteAuthority(id) {
      this.request.delete("/authority/deleteRailwayAuthority/" + id).then(
        response => {
          if (response.data.code === 1) {
            this.$message({
              message: '删除成功！',
              type: 'success',
              duration: 1000
            });
            if (this.search != '') {
              this.getAuthority()
            } else {
              this.getAuthorityPage()
            }
          } else {
            this.$message({
              message: '删除失败！',
              type: 'error',
              duration: 1000
            });
          }
        },
        error => {
          console.log(error)
        }
      )
    }
  },
  created() {
    this.getAuthorityPage()
  },
  computed: {
    tableData() {
      return this.listdata
    }
  }
}
</script>

<style scoped>
.div-main {
  width: 100%;
  min-height: 86vh
}

::v-deep .el-popconfirm__main {
  margin-bottom: 20px;
}
</style>